<template>
  <el-dialog
    v-model="visibility"
    :title="props.rowData.id ? config.button.text.edit : config.button.text.add"
    append-to-body
    width="60%"
    draggable
    :close-on-click-modal="false">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      :label-width="config.form.label.width"
      status-icon>
      <el-row>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
            label="模板名称"
            prop="fullName">
            <el-input
              v-model="formData.fullName"
              placeholder="模板名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
            label="标题一"
            prop="firstTitle">
            <el-input
              v-model="formData.firstTitle"
              placeholder="标题一"></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
            label="提货编号"
            prop="number">
            <el-input
              v-model="formData.number"
              placeholder="提货编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
            label="公司"
            prop="company">
            <el-input
              v-model="formData.company"
              placeholder="公司"></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
            label="合同内容"
            prop="contractContent">
            <el-input
              v-model="formData.contractContent"
              placeholder="合同内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
            label="标题二"
            prop="secondTitle">
            <el-input
              v-model="formData.secondTitle"
              placeholder="标题二"></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
            label="提货单位"
            prop="footContent">
            <el-input
              v-model="formData.footContent"
              placeholder="提货单位"></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
            label="启用状态"
            prop="isEnable">
            <el-select
              v-model="formData.isEnable"
              placeholder="启用状态"
              clearable>
              <el-option
                :label="config.button.text.enable"
                :value="true" />
              <el-option
                :label="config.button.text.stop"
                :value="false" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
            label="默认格式">
            <el-switch
              v-model="formData.defaultFormat"
              class="ml-2"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-divider content-position="left">选择配置</el-divider>

    <div class="transfer">
      <el-transfer
        v-model="draggedList"
        :data="list"
        :titles="['所有配置名称', '已选择配置']"
        :props="{
          key: 'key',
          label: 'value',
        }"
        @change="change" />
    </div>

    <template #footer>
      <div>
        <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
        <el-button
          type="primary"
          @click="saveEvent">
          {{ config.button.text.save }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import config from "@/common/element-plus/config";
import ApiDeliveryTemplate from "@/api/modules/delivery-template"
import { useValidator } from "@/hooks/useValidator";

const visibility = ref(false)
const formData = ref({})
const formRef = ref()
// 固定数据
const list = ref([]);
// 模板对应数据
const draggedList = ref([]);
// 校验
const { required, validate, clearValidate } = useValidator()

const formRules = {
  fullName: [required("模板名称")],
  firstTitle: [required("标题一")],
  number: [required("提货编号")],
  company: [required("公司")],
  contractContent: [required("合同内容")],
  secondTitle: [required("标题二")],
  footContent: [required("提货单位")],
  isEnable: [required("启用状态", "change")],
}

const props = defineProps(["rowData"])

const emits = defineEmits(["save"])

watch(() => visibility.value, async (newVal) => {
  if (newVal) {
    if (!props.rowData.id) {
      formData.value = {
        ...props.rowData,
        isEnable: true,
      };
      formData.value.defaultFormat = false
    } else {
      formData.value = props.rowData;
      formData.value.firstTitle = JSON.parse(formData.value.templateConfig).titleContent[0]
      formData.value.number = JSON.parse(formData.value.templateConfig).titleContent[1]
      formData.value.company = JSON.parse(formData.value.templateConfig).titleContent[2]
      formData.value.contractContent = JSON.parse(formData.value.templateConfig).titleContent[3]
      formData.value.secondTitle = JSON.parse(formData.value.templateConfig).footContent[0]
      formData.value.footContent = JSON.parse(formData.value.templateConfig).footContent[1]
      formData.value.defaultFormat = JSON.parse(formData.value.templateConfig).defaultStyle
    }
    draggedList.value = []
    if (formData.value.id) {
      draggedList.value = JSON.parse(formData.value.templateConfig).title
    }
    list.value = formData.value.list
    setTimeout(() => {
      clearValidate(formRef.value)
    })
  }
}, { immediate: true })

const saveEvent = async () => {
  // 校验表单
  await validate(formRef.value)
  const data = {
    title: draggedList.value,
    titleContent: [formData.value.firstTitle, formData.value.number, formData.value.company, formData.value.contractContent],
    footContent: [formData.value.secondTitle, formData.value.footContent],
    defaultStyle: formData.value.defaultFormat
  }
  delete formData.value.firstTitle
  delete formData.value.number
  delete formData.value.company
  delete formData.value.contractContent
  delete formData.value.secondTitle
  delete formData.value.footContent
  delete formData.value.defaultFormat
  delete formData.value.list
  if (formData.value.id) {
    // 修改
    await ApiDeliveryTemplate.update({
    ...formData.value,
    templateConfig: JSON.stringify(data)
  })
  } else {
    // 新增
    await ApiDeliveryTemplate.insert({
    ...formData.value,
    templateConfig: JSON.stringify(data)
  })
  }
  emits("save")
}

defineExpose({ visibility })
</script>

<style lang="scss" scoped>
.transfer {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
